<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="../css/index.css">
        <title>Syba - Administration</title>
        <script type="text/javascript" src="../scripts_js/XMLHttpRequest.js"></script>
        <script type="text/javascript" src="../scripts_js/fonctions.js"></script>
    </head>
    <body onload="verification_session();
            addId();
            cacher();">
        <header>
            <a href="ens_gestion_eleves.html">
                <img id="home_direction" src="../images/home.png" alt="Direction page d'accueil" />
            </a>
            <h1 id ="title"> Ajout Eleve</h1>
            <div id="connecté">
                Bienvenue   <b id="aff_pseudo2"></b> <input type="button" id="b_deconnexion" value="deconnexion " onclick="deconnexion();"/>
            </div>
        </header>

        <nav>

        </nav>
        <article>
            <section id="formulaire_edition_adulte"> 
                <form method="post" enctype="multipart/form-data" action="../scripts_php/eleve_ajouter_mysql.php" accept-charset="utf-8">

                    <img src="../images/Mario_Retro.png" alt="Photo de l'eleve" id="photo_eleve" />

                    <input type="hidden" id="id_adulte" name="id_adulte" />
                    <p>
                        <label>Prenom : </label>
                        <input type="text" id="prenom_eleve" name="prenom_eleve" autocomplete="off" pattern="[A-Za-z1-9'-_éèàçùâäüîïëêô ]*" required />
                    </p>
                    <p>
                        <label>Nom : </label>
                        <input type="text" id="nom_eleve" name="nom_eleve" autocomplete="off" pattern="[A-Za-z1-9'-_éèàçùâäüîïëêô ]*" required />
                    </p>
                    <p>
                        <label>Mot de passe : <input type="password" id="password1" name="password1"  oninput="checkPasswords()" required/></label>
                    </p>
                    <p>
                        <label>Confirmer mot de passe : <input type="password" id="password2" name="password2" oninput="checkPasswords()" required/></label>
                    </p>

                    <p>
                        <label>Photo : </label>
                        <input type="file" id="url_photo_eleve" name="url_photo_eleve" accept="image/jpeg,image/png" onchange="fileSelected();" /> <label>Taille max: 2M </label>
                    </p>
                    <p>
                        <input type="submit"/>
                    </p>
                </form>
            </section>
        </article>
        <footer>
            <script type="text/javascript">
        afficherfooter();
            </script>
        </footer>
        <script type="text/javascript">

            function cacher() {
                if (readCookie("Syba_connexion") !== null) {

                    document.getElementById('aff_pseudo2').innerHTML = readCookie("Syba_connexion");

                }
                else {
                    document.getElementById('connecté').setAttribute('style', 'display:none;');
                }
            }

            //Deconnexion de l'utilisateur
            function deconnexion() {
                eraseCookie("Syba_connexion");
                eraseCookie("Syba_id_personne");
                window.location = "../index.html";

            }

            //Ajout de l'id dans le input hidden
            function addId() {
                // alert(readCookie("Syba_id_personne"));
                document.getElementById("id_adulte").value = readCookie("Syba_id_personne");
            }



            function fileSelected() {
                var iMaxFilesize = 2048576; // 2MB

                var oFile = document.getElementById('url_photo_eleve').files[0];


                // little test for filesize
                if (oFile.size > iMaxFilesize) {
                    alert('L\'image a une taille supérieure à  2M');
                    return;
                }
                var oImage = document.getElementById('photo_eleve');

                var oReader = new FileReader();
                oReader.onload = function(e) {

                    oImage.src = e.target.result;
                };


                oReader.readAsDataURL(oFile);
            }

            //Vérification des mots de passe
            function checkPasswords() {
                var password1 = document.getElementById('password1');
                var password2 = document.getElementById('password2');
                if (password1.value !== password2.value) {
                    password2.setCustomValidity('Les mots de passe ne sont pas identiques');
                } else {
                    password2.setCustomValidity('');
                }
            }
        </script>
    </body>
</html>